<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
* {
	margin: 0;
	padding: 0;/*//尽力全屏*/

}
body{
	background-color: cornflowerblue;
}
#header {    /*  主体下的大盒子*/
background: url(阳光.jpg)top center no-repeat;
	position: relative;
	font-family: "新宋体";
	font-size: 22px;
	text-align: center;
}
#nav h3, p {  /* 网页头部文字*/
	position: relative;
	top: 15px;
}
#edge {     /*导航栏，一开始的问题是js无法点击，后来我设置了相对的位置，导航栏无法点击，JS又可以了*/
	float: left;
	width: 135px;
	height: 500px;
	position: fixed;
}
#edge ul {
	position: relative;
	top: 15px;
	margin-left: 10px;
}
#edge li {
	list-style: none;
	background-color: #CCCCD6;   /*远山紫*/
	border: 1px groove #B1AEAE;
	margin: 3px 0px 2px 0px;
	width: 85px;
	height: 28px;
	-webkit-box-shadow: 8px 10px #7A7676;
	box-shadow: 8px 10px #7A7676;
}
/*原来的锚点链接的形式*/
#edge a {
	text-decoration: none;
	display: block;
	font-family: "新宋体";
}
#edge a:visited {
	color: darkgray;
	font-size: 16px;
	font-family: "微软雅黑";
}
#edge a:hover {
	color: red;
	font-size: 30px;
}
#edge input {
	margin: 4px 0px 3px 0px;
	border: 1px #FFFFFF;
	background-color: #CCCCD6;
	transition-duration: 1s;
}
#edge input:visited {
	color: darkgray;
	font-size: 16px;
	font-family: "微软雅黑";
}
#edge input:hover {
	color: red;
	font-size: 18px;
	border-radius: 5px;
}
#edge li:hover {
	border-radius: 8px;
	transition-duration: 1s;
	width: 89px;
	height: 34px;
}
#edge2 {
	height: 80px;
	width: 105px;
	position: relative;
	position: fixed;
	right: 15px;
	top: 15px;
	background-color: #CCCCD6;
	float: right;
	font-family: "微软雅黑";
}
p:nth-child(1) {
	font-family: "华文新魏";
	font-size: 24px;
	text-align: center;
}
#main {
	position: relative;
	top: 130px;
	width: auto;
	height: 1800px;
}
#main_top a {
	/*轻拟化的超链接，操莫名其妙*/
	height: auto;
	width: 200px;
	color: aliceblue;
	text-decoration: none;
	font-size: 15px;
	transition-duration: 1s;
}
#main_top a:hover {
	color: yellow;
	font-size: 18px;
}
#main_top a:visited {
	color: azure;
}
#main_top li:hover {
	background-color: #7A7374;
	width: 400px;
	height: 23px;
}
#main_top li:nth-child(1) {
	position: relative;
	top: 10px;
}
#main_top li {
	width: 330px;
	height: 16px;
	padding: 4px 5px 6px 5px;
	list-style: none;
	margin: 15px auto;
	transition-duration: 1s;
	border: 1px groove #7A7A7A;
	border-radius: 16px;
}
#main_top ul {      /*自己作业的主体*/
	background-color: rgba(122,115,116,0.25);
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	border-radius: 25px;
	height: 1500px;
}
#main_under {   /*自我鼓励的图文*/
	background: url(VCG211293205876.jpg) center top no-repeat;
	height: 800px;
}
#main_under p {
	line-height: 50px;
	text-align: center;
	font-family: "幼圆";
	font-size: 25px;
}
#main_under p:nth-child(1) {
	font-size: 35px;
}
#main_botton {
	position: relative;
	top: 550px;
	margin: 0 auto;
	height: 700px;
	width: 700px;
}
#footer {
	height: 30px;
	position: inherit;
	top: 1500px;
}
</style>
    </head>
    
    <body >
    <div id="header">
       <div id="edge">
        <!--<ul>
          <li>
            <input type="button" value="导航栏"  onClick="li0()">
          </li>

          <li>
            <input type="button" value="&nbsp;&nbsp;J&nbsp;S&nbsp;&nbsp;" onClick="li1()">
          </li>
          <li>
            <input type="button" value="&nbsp;自己制作&nbsp;" onClick="li2()">
          </li>
          <li>
            <input type="button" value="&nbsp;更新日志 &nbsp;" onClick="li5()">
          </li>
           <li>
            <input type="button" value="&nbsp;来到底部&nbsp;" onClick="li4()">
          </li>
          <li>
            <input type="button" value="&nbsp;返回顶部&nbsp;" onClick="li3()">
          </li>
         </ul>-->
         <ul>
         	<li><a href="#edge">1</a></li>
         	<li><a href="#nav">2</a></li>
         	<li><a href="#main">3</a></li>
         	<li><a href="#main_botton">4</a></li>
         	<li><a href="#footer">5</a></li>
         	<li><a href="">6</a></li>
         </ul>
       </div>
      <div id="edge2">
        <h3>时间：</h3>
        <div id="timee"></div>
      </div>
      
      <div id="nav">
        <h3>我的网上之家</h3>
        <p>在这里有我学习的一些作业</p>
     </div>
      <div id="main">
        <div id="main_top">
          <table>
            <ul>
              <li id="javas"><a href="站点ftp/5.27/Atrr接口.html" target="_blank">JS Atrr接口 2022年5月27号</a></li>
              <li><a href="站点ftp/5.27/Atrr接口--2.html" target="_blank"> JS Atrr接口-----2 2022年5月27号 </a></li>
              <li><a href="站点ftp/5.27/Atrr接口和事件处理.html" target="_blank"> JS Atrr接口和事件处理 2022年5月27号</a></li>
              <li><a href="站点ftp/5.25/DOM对象.html" target="_blank">JS DOM对象 2022年5月25号</a></li>
              <li><a href="站点ftp/5.25/盒子的放大缩小.html" target="_blank">JS 盒子的放大缩小 2020年5月25号</a></li>
              <li><a href="站点ftp/5.25/Untitled-2.html" target="_blank">JS 添加 2022年5月25号</a></li>
              <li><a href=""></a></li>
              <li><a href="站点ftp/作业.html"  target="_blank">JS 5月20号的作业 2022年5月20号</a> </li>
              <li><a href="站点ftp/5.20/流浪器对象-1.html"  target="_blank">JS DOM，hstory对象 2020年5月20号</a></li>
              <li><a href="站点ftp/5.20/验证.html"  target="_blank">JS locaction对象 2022年5月20号</a></li>
              <li><a href="站点ftp/新建文件夹 (2)/Array对象-2.html"  target="_blank">JS Array对象 2022年5月17号</a></li>
              <li><a href="站点ftp/新建文件夹 (2)/Date对象.html"  target="_blank">JS Date对象 2022年5月17号</a></li>
              <li><a href="站点ftp/新建文件夹 (2)/随机颜色.html"  target="_blank">JS 随机颜色 2022年5月17号</a></li>
              <li><a href="站点ftp/5.13/正则验证.html" target="_blank"  name="hahahhaha">JS 正则验证 2022年5月13日</a></li>
              <li ><a href="站点ftp/5.13/RegExp对象-3.html" target="_blank">JS RegExp对象 2022年5月13日</a></li>
              <li><a href="站点ftp/5.13/String对象-2.html" target="_blank" >JS String对象-2 2022年5月13日</a></li>
              <li><a href="站点ftp/5.13/String对象.html" target="_blank" >JS String对象 2022年5月13日</a></li>
              <li><a href="站点ftp/作业/Untitled-4.html" target="_blank" >JS 属性 2022年5月10号</a></li>
              <li><a href="站点ftp/作业/Untitled-5.html" target="_blank" >JS Boolean对象 2022年5月10号</a></li>
              <li><a href="站点ftp/作业/构造函数.html" target="_blank" >JS 构造函数 2022年5月10号</a></li>
              <li><a href="站点ftp/作业/闭包函数-1.html" target="_blank" >JS 闭包函数-1 2022年5月10号</a></li>
              <li><a href="站点ftp/作业/属性和方法.html" target="_blank" >JS 属性和方法 2022年5月10号</a></li>
              <li><a href="站点ftp/作业/属性和方法-2.html" target="_blank" >JS 属性和方法-2 2022年5月10号</a></li>
              <li ><a href="站点ftp/作业/bym.html" target="_blank" >JS 金字塔  2022年04月29日</a></li>
              <li ><a href="站点ftp/作业/最小公倍数.html" target="_blank">JS 最小公倍数 2022年05月5日</a></li>
              <li><a href="站点ftp/作业/求和1.html" target="_blank">JS 求和（1）2022年05月06日</a></li>
              <li><a href="站点ftp/作业/求和2.html" target="_blank">JS 求和（2）2022年05月06日</a></li>
              <li><a href="站点ftp/作业/大小写转换3.html" target="_blank">JS 大小写转换 2022年05月06日</a></li>
              <li><a href="站点ftp/作业/先分析再判断 (1).html" target="_blank">JS 先分析再判断(1) 2022年05月06日</a></li>
              <li><a href="站点ftp/作业/先分析再判断 (2).html" target="_blank">JS 先分析再判断(2) 2022年05月06日</a></li>
              <li><a href="站点ftp/作业/先分析再判断 (3).html" target="_blank">JS 先分析再判断(3) 2022年05月06日</a></li>
              <li><a href="站点ftp/作业/函数.html" target="_blank">JS 函数的XXX 2022年05月06日</a></li>
              <li><a href="站点ftp/作业/网页简单计数器.html" target="_blank">JS 网页简单计数器  2022年05月06日</a> </li>
              <li><a href="站点ftp/作业/拉伯起亚列数.html" target="_blank">JS 斐波拉契列数 2022年05月06日</a></li>
              <li id="try"><a href="站点ftp/我的网页.html">复习</a></li>
            </ul>
          </table>
        </div>
        <div id="main_under">
          <p >《渔家傲·天接云涛连晓雾》</p>
          <p ><i>李清照</i></p>
          <p>天接云涛连晓雾，星河欲转千帆舞。</p>
          <p>仿佛梦魂归帝所。闻天语，殷勤问我归何处。</p>
          <p>我报路长嗟日暮，学诗谩有惊人句。</p>
          <p><strong>九万里风鹏正举。风休住，蓬舟吹取三山去！</strong></p>
        </div>
      </div>
      <div id="main_botton">
        <ul>
          <li>2022年5月28日 更新了导航栏，超链接的点击的动效，添加了JS实现的实时日期</li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div id="footer"><a href="try.html" title="一个网页设计草图" target="_blank">梦的开始</a><a href="szj.html" title="另一个网页设计草图" target="_blank">开始</a>
        <p> 
          <!-- #BeginDate format:acCh2m -->2022年8月26日 星期五  21:08<!-- #EndDate --> 
          <br>
          我的网页</p>
      </div>
      
    </div>
</body>
    </html>
<script>
	//右侧的时间，实时
	function timm(){var t=new Date();
	/*var t=document.write("edge2");
	console.log(t)*/
	timee.innerHTML=t.toLocaleString();}
	(function(){
		int=setInterval("timm()",900);
	})();
	//左侧的导航
	function li0(){location.hash="#edge"};  
	   function li1(){location.hash="#javas"};
		function li2(){location.hash="#try"};
		function li3(){location.hash="#nav"};
		function li4(){location.hash="#footer"};
		function li5(){location.hash="#main_botton"};
		function li6(){location.hash=""};
	</script>